<template>
	<view>
		<view v-if="lists.length!=0&&isshow">
			<view class="bi_item" v-for="(item,index) in lists" :key='index' @tap='toSsDetail(item)'>
				<view class="bi_item_top">
					<text
						class="bi_item_top_tpye" v-if="item.channel!='Channel_SSYKT'">卡号：{{item.cardNumber||'-'}}
					</text>
					<text
						class="bi_item_top_tpye" v-if="item.channel=='Channel_SSYKT'">卡类型：长江中游三省卡
					</text>
					<!-- <text class="bi_item_top_time">{{item.create_time}}</text> -->
				</view>
				<view style="width: 710rpx;height: 1rpx;background-color: #DFDFDF;"></view>
				<view class="bi_item_item" style="margin-top: 34rpx;position: relative;">预约景区：<text
						style="color:#1a1818;">{{item.resourceName||''}}
						

					</text>
				</view>
				<view class="bi_item_item" style="margin-top: 34rpx;">
					预约时间：{{item.appTime||''}}
				</view>
				<view class="bi_item_item" style="margin-top: 34rpx;padding-bottom: 30rpx;">
					预约状态：{{item.channel=='Channel_BJ'||item.channel=='Channel_ZHY'?'预约成功':item.channel=='Channel_SSYKT'?item.status==0?'预约待支付':item.status==1?'预约成功':item.status==2?'预约失败':item.status==3?'已完成':item.status==4?'已取消':item.status==6?'超时自动取消':'':item.channel=='Channel_SZH'?item.status==1?'预约成功':item.status==2?'预约失败':item.status==3?'已取消':item.status==4?'已入园':'':''}}
				</view>
				<view style="width: 670rpx;display: flex;justify-content: flex-end;padding-bottom: 30rpx;gap: 30rpx;">
					<view v-if="item.mcName=='湘西芙蓉镇景区'" class="bi_item_buttom" @click="cancelYuyue(item.recordId)">取消预约</view>
					<view class="bi_item_buttom" v-if="item.resourceName.indexOf('欢乐海洋')!=-1" style="background-color: #2979FF;" @click="seeCode(item.id)">入园二维码</view>
					<view v-if="item.channel=='Channel_ZHY'||item.channel=='Channel_SZH'||item.resourceName.indexOf('芙蓉镇')!=-1" class="bi_item_buttom" @click="cancelAppoint(item)">取消预约</view>
				</view>

			</view>
		</view>
		<view v-if="lists.length==0&&isshow">
			<view style="height: 100rpx;"></view>
			<u-empty text='此卡无预约记录'>
			</u-empty>
		</view>
		<u-toast ref="uToast" />
		<u-popup v-model="show" mode="center">
					<image  :src="code" style="width: 560rpx;" mode="widthFix"></image>
				</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>

	var that = ''
	export default {
		data() {
			return {
				code:'',
				show:false,
				isshow: false,
				lists: [],
				info: {
					"cardNum": "",
					"mobile": "",
					"channel": "",
					"pageNo": 1,
					"pageSize": 10
				},
				obj: {
					"token": "",
					"card_num": "",
					"card_type": ""
				}
			}
		},
		onLoad(e) {
			that = this
			console.log(e);
			this.info.mobile = e.mobile
			this.info.cardNum = e.cardNum
			this.info.channel = e.channel

		},
		onShow() {
			this.getAppointRecordMethod()
		},
		methods: {
			seeCode(e){
				this.$u.api.getQrByApi({orderId:e}).then(res => {
					if (res) {
						this.code='data:image/png;base64,'+res.data.qrBase64
						this.show=true
						
					}
				})
			},
			getAppointRecordMethod() {
				this.$u.api.getAppointRecord(this.info).then(res => {
					if (res) {
						this.isshow = true
						this.lists = res.data
					}
				})
			},
			toSsDetail(e) {
				if (e.channel == 'Channel_SSYKT') {
					uni.navigateTo({
						url: '/member/other/recorddetail?rId=' + e.id + '&phone=' + that.info.mobile
					})
				}
			},
			cancelAppoint(e) {
				this.$u.api.cancelAppoint({appointId:e.id,channel:e.channel}).then(res => {
					if (res) {
						this.getAppointRecordMethod()
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: rgb(239, 239, 244);
	}
</style>
<style scoped lang="scss">
	.bi_item_buttom {
		width: 150rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #f00;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.is_use {
		padding: 10rpx 20rpx 10rpx 20rpx;
		background-color: #f00;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 24rpx;
		position: absolute;
		right: 20rpx;
		top: 60rpx;
	}

	.no_use {
		padding: 10rpx 20rpx 10rpx 20rpx;
		background-color: #999;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 24rpx;
		position: absolute;
		right: 20rpx;
		top: 60rpx;
	}

	.bi_item {
		margin: 20rpx 20rpx 0rpx 20rpx;
		width: 710rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;

		.bi_item_top {
			height: 84rpx;
			padding: 0rpx 20rpx 0rpx 20rpx;
			display: flex;
			align-items: center;
			position: relative;

			.bi_item_top_image {
				width: 82rpx;
				height: 46rpx;
			}

			.bi_item_top_tpye {
				color: #007BFF;
				font-size: 28rpx;
				padding-left: 0rpx;
				font-weight: bold;
			}

			.bi_item_top_time {
				color: #888888;
				font-size: 28rpx;
				position: absolute;
				right: 20rpx;
			}

		}

		.bi_item_item {
			font-size: 28rpx;
			color: #888;
			padding-left: 20rpx;
			display: flex;
			align-items: center;
		}
	}
</style>